import React, {useEffect, useState} from 'react';
import axios from "axios";
import {ProxyConfigClass} from "../../../Util/Proxy";
import Cookies from "js-cookie";
import {Form, Input, message, Popconfirm, Select, Table, Typography} from "antd";
import {useNavigate} from "react-router-dom";
function Index(props) {
    const navigate = useNavigate();
    const [form] = Form.useForm();
    const [editingKey, setEditingKey] = useState('');
    const [selectionType, setSelectionType] = useState('checkbox');
    const [plan,setPlan]=  useState([])
    useEffect(
        ()=>{
            axios.post(ProxyConfigClass.isProxy ? ProxyConfigClass.urlPrefix : ProxyConfigClass.isGoLongUrt +"/plan/select",{},{
                headers: {
                    "Token": Cookies.get("Token")
                }
            }).then(function (response) {
                const res=response.data
                if (res.msg === "账号再其他地方登录请重新登录") {
                    message.warning("账号再其他地方登录请重新登录")
                    navigate("/hello")
                }else{
                    console.log("+-+")
                    console.log(res)
                    var tablePlans = res.plans.map(
                            t=>{
                                return{
                                    key:t.Id,
                                    Id:t.Id,
                                    CompleteIs:t.CompleteIs?"是":"否",
                                    Description:t.Description
                                }
                            }
                        );
                    setPlan(tablePlans)
                }
            }).catch(function (error) {
                alert(error);
            });
        }
        ,[])

    const columns = [
        {
            title: '序号',
            dataIndex: 'Id',
            defaultSortOrder: 'descend',
            sorter: (a, b) => a.Id - b.Id,
            editable: true,
        },
        {
            title: '描述',
            dataIndex: 'Description',
            filters: [
                {
                    text: 'London',
                    value: 'London',
                },
                {
                    text: 'New York',
                    value: 'New York',
                },
            ],
            onFilter: (value, record) => record.Description.indexOf(value) === 0,
        },
        {
            title: '是否完成',
            dataIndex: 'CompleteIs',
            filters: [
                {
                    text: '是',
                    value: '是',
                },
                {
                    text: '否',
                    value: '否',
                },
            ],
            // specify the condition of filtering result
            // here is that finding the name started with `value`
            onFilter: (value, record) => record.name.indexOf(value) === 0,
            sorter: (a, b) => a.CompleteIs.length - b.CompleteIs.length,
            sortDirections: ['descend'],
        },
        {
            title: '删除',
            dataIndex: 'delete',
            render: (_, record) =>
                plan.length >= 1 ? (
                    <Popconfirm title="Sure to delete?" onConfirm={() => handleDelete(record.key)}>
                        <a>删除</a>
                    </Popconfirm>
                ) : null,
        },
        {
            title: '修改',
            dataIndex: 'chage',
            render: (_, record) => {
                const editable = isEditing(record);
                return editable ? (
                    <span>
            <Typography.Link
                onClick={() => save(record.key)}
                style={{
                    marginRight: 8,
                }}
            >
              Save
            </Typography.Link>
            <Popconfirm title="Sure to cancel?" onConfirm={cancel}>
              <a>Cancel</a>
            </Popconfirm>
          </span>
                ) : (
                    <Typography.Link disabled={editingKey !== ''} onClick={() => edit(record)}>
                        修改
                    </Typography.Link>
                );
            }
        },

    ];
    const onChange = (pagination, filters, sorter, extra) => {
        console.log('params', pagination, filters, sorter, extra);
    };
    const handleChange = (value) => {
        console.log(`Selected: ${value}`);
    };
    const EditableCell = ({
                              editing,
                              dataIndex,
                              title,
                              inputType,
                              record,
                              index,
                              children,
                              ...restProps
                          }) => {
        const inputNode = inputType === 'tags' ?  <Input/>   : <Input/>;
        return (
            <td {...restProps}>
                {editing ? (
                    <Form.Item
                        name={dataIndex}
                        style={{
                            margin: 0,
                        }}
                        rules={[
                            {
                                required: true,
                                message: `Please Input ${title}!`,
                            },
                        ]}
                    >
                        {inputNode}
                    </Form.Item>
                ) : (
                    children
                )}
            </td>
        );
    };
    const isEditing = (record) => record.key === editingKey;
    const edit = (record) => {
        form.setFieldsValue({
            name: '',
            age: '',
            address: '',
            ...record,
        });
        setEditingKey(record.key);
    };
    const cancel = () => {
        setEditingKey('');
    };
    const save = async (key) => {
        console.log(key)
    };

    const handleDelete = (key) => {

    };
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record) => ({
            disabled: record.name === 'Disabled User',
            name: record.name,
        }),
    };


    return(
    <Form form={form} component={false}>
    <Table    rowSelection={{
        type: selectionType,
        ...rowSelection,
    }} columns={columns} dataSource={plan} onChange={onChange}
              components={{
                  body: {
                      cell: EditableCell,
                  },
              }}
              bordered
              rowClassName="editable-row"
              pagination={{
                  onChange: cancel,
              }}/>
    </Form>
);
}

export default Index;
